<template>
  <Card>
    <JG-search
      :searchData="searchData"
      @on-input-search="askDatasearch"
      @on-change-search="askDatasearchs"
      @on-change-change="askDatas"
    />
    <JG-table
      :params="params"
      :data="data"
      :loading="loading"
      :total="total"
      :columns="columns"
      :maxHeight="tableHeight"
      @askData="askData"
    ></JG-table>
  </Card>
</template>
<script>
import { siteindexoploglist } from "@api/oplog";
export default {
  name: "",
  data() {
    return {
      modal: false,
      params: {
        keyword: "",
        operate_id: "",
        start_time: "",
        end_time: "",
        page: 1,
        pageSize: 10,
      },
      loading: false,
      total: 0,
      searchData: {
        left: [
          {
            id: 1,
            key: "Input",
            value: "",
            clearable: true,
            placeholder: " 请输入日志关键字",
            callback: "search",
          },
          {
            id: 3,
            key: "DatePicker",
            type: "daterange",
            value: [new Date(), new Date()],
            clearable: true,
            placeholder: "请选择查询时间",
            date: "",
            callback: "change",
          },
          {
            id: 2,
            key: "Select",
            value: "",
            clearable: true,
            placeholder: "请选择操作人",
            childList: [],
            callback: "change",
            multiple: "multiple",
          },
        ],
      },
      columns: [
        { title: "ID", type: "index", width: 60 },
        {
          title: "操作内容",
          key: "action_content",
          ellipsis: true,
          tooltip: true,
          minWidth: 300,
        },
        { title: "操作时间", key: "created_at_str", width: 170 },
        { title: "操作人", key: "operate_name", width: 100 },
        { title: "操作人角色", slot: "role_name_arr", width: 280 },
        { title: "用户IP", key: "ip", width: 150 },
      ],
      data: [],
      tableHeight: window.screen.height - 360,
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    initial() {
      if (this.$route.query.id) {
        this.searchData.left.forEach((item) => {
          if (item.id === 2) {
            item.value = this.$route.query.id;
          }
        });
      }
      this.askData();
    },
    askDatas() {
      this.params.page = 1;
      this.askData();
    },
    askDatasearchs() {
      this.searchData.left.forEach((item) => {
        if (item.id === 1) {
          item.value = item.value
            .replace(/(^\s*)|(\s*$)/g, "")
            .replace(/(^\http:\/\/*)|(\/*$)/g, "")
            .replace(/(^\https:\/\/*)|(\/*$)/g, "");
        }
      });
      this.askDatasearch();
    },
    askData() {
      this.searchData.left.forEach((item) => {
        if (item.id === 1) {
          this.params.keyword = item.value;
        } else if (item.id === 2) {
          this.params.operate_id = item.value;
        } else if (item.id === 3) {
          this.params.start_time = item.value[0]
            ? this.$Date(item.value[0]).format("YYYY-MM-DD")
            : "";
          this.params.end_time = item.value[1]
            ? this.$Date(item.value[1]).format("YYYY-MM-DD")
            : "";
        }
      });
      this.loading = true;
      siteindexoploglist(this.params)
        .then((res) => {
          this.total = res.total;
          this.data = res.list;
          this.searchData.left.forEach((item) => {
            if (item.id === 2) {
              if (JSON.stringify(item.childList) == "[]") {
                item.childList = res.condition.member_list;
              }
            }
          });
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    askDatasearch() {
      this.params.page = 1;
      this.searchData.left.forEach((item) => {
        if (item.id === 2) {
          item.value = "";
        }
      });
      this.askData();
    },
  },
};
</script>
